<template>
  <div class="app-container">
    <custom-container ref="customContainerRef" :config="mainConfig" />
    <!-- 新增或修改国家信息 -->
    <setForm
      ref="setFormRef"
      v-model:open="open"
      v-model:title="title"
      @changeList="handleQuery"
    />
  </div>
</template>
<script lang="ts" setup>
import { Edit, Delete, Plus, Download } from '@element-plus/icons-vue'
import { ref, getCurrentInstance, defineAsyncComponent, computed } from 'vue'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { getQueryList, delCountry } from '@/api/basicConfig/stateMaintanance'

const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const { t } = useI18n()
let 
  multiple = ref(true),
  open = ref(false),
  title = ref(''),
  queryParams = ref({
    countryCode: undefined,
    countryChName: undefined,
    countryEnName: undefined,
    pageNum: 1,
    pageSize: 10,
  }),
  customContainerRef = ref(null),
  countryId = [],
  setFormRef = ref(null),
  {
    proxy,
  }:{
    proxy:any
  } = getCurrentInstance()

const handleQuery = () => {
  customContainerRef.value.getList()
}

// 多选框选中数据
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  const rowsList = JSON.parse(JSON.stringify(rows))
  console.log(rowsList)
  countryId = rowsList.map((item) => item.id)
  multiple.value = !rowsList.length
}
const handleAdd = () => {
  open.value = true
  title.value = '新增国家信息'
}
const handleDelete = (row: { [key: string]: any }) => {
  const ids = row?.id || countryId
  ElMessageBox.confirm(`"是否确认删除国家描述编号为"${ ids }"的数据项?"`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delCountry(ids)
    handleQuery()
    ElMessage.success('删除成功')
  })
  .catch((error) => {
    if (error == 'cancel') {
      ElMessage.error(error)
    }
  })
}
const handleExport = () => {
  proxy.$download('/system/country/info/export', {
    ...queryParams.value,
  }, `国家信息_${ new Date().getTime() }.xlsx`)
}
const handleUpdate = (row: { [key: string]: any }) => {
  open.value = true
  title.value = '修改国家信息'
  setFormRef.value.getDetail(row.id)
}

const mainConfig = computed(() => {
  const queryFields = 'basicConfig.stateMaintenance.queryFields.'
  const btns = 'basicConfig.stateMaintenance.btns.'
  const columns = 'basicConfig.stateMaintenance.columns.'
  return {
    query: {
      fields: [
        {
          label: t(`${ queryFields }countryCode`),
          prop: 'countryCode',
          option: {
            clearable: true,
            placeholder: '请输入国家代码',
          },
        },
        {
          label: t(`${ queryFields }countryChName`),
          prop: 'countryChName',
          option: {
            clearable: true,
            placeholder: '请输入国家中文名称',
          },
        },
        {
          label: t(`${ queryFields }countryEnName`),
          prop: 'countryEnName',
          option: {
            clearable: true,
            placeholder: '请输入国家英文名称',
          },
        },
      ],
      queryParams: queryParams.value,
      formOption: {
        labelWidth: '120px',
      },
    },
    btns: [
      {
        title: t(`${ btns }add`),
        icon: Plus,
        onClick: handleAdd,
      },
      {
        title: t(`${ btns }delete`),
        icon: Delete,
        type: 'danger',
        disabled: multiple.value,
        onClick: handleDelete,
      },
      {
        title: t(`${ btns }export`),
        icon: Download,
        type: 'warning',
        onClick: handleExport,
      },
    ],
    table: {
      columns: [
        {
          type: 'selection',
          width: '55',
          align: 'center',
        },
        {
          label: t(`${ columns }countryCode`),
          prop: 'countryCode',
          align: 'center',
        },
        {
          label: t(`${ columns }countryChName`),
          prop: 'countryChName',
          align: 'center',
        },
        {
          label: t(`${ columns }countryEnName`),
          prop: 'countryEnName',
          align: 'center',
        },
        {
          label: t(`${ columns }operation`),
          className: 'custormFixedCol',
          width: '160px',
          align: 'center',
          render: (h, params) => {
            const buttons = [
              {
                title: t(`${ btns }update`),
                icon: Edit,
                clickFun: handleUpdate,
              },
              {
                title: t(`${ btns }delete`),
                icon: Delete,
                clickFun: handleDelete,
              },
            ]
            buttons
            return buttons.map((el) => h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  el.clickFun(params.row)
                },
              },
              {
                default: () => el.title,
              },
            ))
          },
        },
      ],
      event: {
        onSelectionChange: (rows) => {
          handleSelectionChange(rows)
        },
      },
    },
    api: getQueryList,
    customKey: 'basicConfig/stateMaintenance',
  }
})

</script>
